import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, Text, TouchableOpacity} from 'react-native';

export default class extends PureComponent {
    render() {
        const {navigation, balance, price_end} = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.headerWrap}>
                    <TouchableOpacity onPress={() => {
                        navigation.goBack();
                    }}>
                        <Image source={require('../../../images/icon_left_1.png')} style={styles.image}/>
                    </TouchableOpacity>
                    <Text style={styles.title}>会员收益</Text>
                    <TouchableOpacity>
                        <Image source={require('../../../images/icon_question_1.png')} style={styles.image}/>
                    </TouchableOpacity>
                </View>
                <View style={styles.amountWrap}>
                    <Text style={styles.balanceValue}>￥{balance}</Text>
                    <Text style={styles.balanceText}>账户余额</Text>
                    <TouchableOpacity onPress={() => {
                        navigation.navigate('withdrawCash')
                    }}>
                        <View style={styles.btnWrap}>
                            <Text>立即提现</Text>
                        </View>
                    </TouchableOpacity>
                    <Text style={styles.profitText}>累计结算收益：￥{price_end}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 210,
        paddingTop: 20,
        paddingLeft: 12,
        paddingRight: 12,
        backgroundColor: '#f84056'
    },
    headerWrap: {
        width: '100%',
        height: 44,
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 20
    },
    title: {
        fontSize: 16,
        color: '#ffffff',
        textAlign: 'center',
        flex: 1,
        fontWeight: 'bold'
    },
    image: {
        width: 20,
        height: 20
    },
    amountWrap: {
        alignItems: 'center'
    },
    balanceValue: {
        fontSize: 24,
        color: '#fff',
        marginBottom: 10,
    },
    balanceText: {
        fontSize: 10,
        color: '#fff',
        marginBottom: 10
    },
    btnWrap: {
        paddingLeft: 10,
        paddingRight: 10,
        borderRadius: 18,
        paddingTop: 2,
        paddingBottom: 2,
        backgroundColor: '#fff',
        marginBottom: 12
    },
    btnText: {
        fontSize: 14,
        color: '#f84056'
    },
    profitText: {
        fontSize: 10,
        color: '#fff'
    }
});
